<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站文章列表样式</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 通用样式 */
        .article-demo {
            margin-bottom: 4rem;
            padding: 2rem;
            border: 1px solid #eaeaea;
            border-radius: 8px;
        }
        
        .demo-title {
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #eaeaea;
        }
        
        .article-card {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            margin-bottom: 1.5rem;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .article-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.08);
        }
        
        .author-info img {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .stats {
            color: #6c757d;
            font-size: 0.875rem;
        }
        
        .stats i {
            margin-right: 4px;
        }
        
        .action-buttons button {
            transition: all 0.2s ease;
        }
        
        .action-buttons button:hover {
            transform: scale(1.05);
        }
        
        /* 样式1：简约卡片式 */
        .style-1 .article-card {
            border: 1px solid #eaeaea;
        }
        
        .style-1 .article-image {
            height: 200px;
            overflow: hidden;
        }
        
        .style-1 .article-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .style-1 .article-card:hover .article-image img {
            transform: scale(1.03);
        }
        
        .style-1 .article-content {
            padding: 1.25rem;
        }
        
        /* 样式2：紧凑列表式 */
        .style-2 .article-card {
            border: none;
            border-bottom: 1px solid #eaeaea;
            padding-bottom: 1rem;
        }
        
        .style-2 .article-card:last-child {
            border-bottom: none;
        }
        
        .style-2 .article-image {
            max-height: 120px;
            overflow: hidden;
            border-radius: 6px;
        }
        
        .style-2 .article-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 样式3：杂志风格 */
        .style-3 .article-card {
            border: none;
            background-color: #f8f9fa;
        }
        
        .style-3 .article-content {
            padding: 1.5rem;
        }
        
        .style-3 .article-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        
        .style-3 .multi-image {
            display: flex;
            gap: 0.5rem;
            margin: 1rem 0;
        }
        
        .style-3 .multi-image img {
            flex: 1;
            height: 120px;
            object-fit: cover;
            border-radius: 4px;
        }
        
        /* 样式4：无图文章风格 */
        .style-4 .article-card {
            border: 1px solid #eaeaea;
            background-color: white;
        }
        
        .style-4 .article-content {
            padding: 1.5rem;
        }
        
        .style-4 .category-badge {
            font-size: 0.75rem;
            padding: 0.25rem 0.75rem;
            margin-bottom: 0.75rem;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .style-2 .article-image {
                margin-bottom: 1rem;
            }
            
            .style-3 .multi-image {
                flex-direction: column;
            }
            
            .style-3 .multi-image img {
                height: 180px;
            }
            
            .action-buttons {
                margin-top: 0.75rem;
            }
        }
    </style>
</head>
<body class="p-4 bg-light">
    <div class="container">
        <h1 class="text-center mb-5">社交网站文章列表样式</h1>
        
        <!-- 样式1：简约卡片式 -->
        <div class="article-demo style-1 bg-white">
            <h3 class="demo-title">1. 简约卡片式文章列表</h3>
            
            <!-- 带单张图片的文章 -->
            <div class="article-card">
                <div class="row">
                    <div class="col-md-4">
                        <div class="article-image">
                            <img src="https://picsum.photos/600/400?random=1" alt="城市建筑风景照片">
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="article-content">
                            <div class="author-info d-flex align-items-center mb-2">
                                <img src="https://picsum.photos/100/100?random=101" alt="作者头像">
                                <div class="ms-2">
                                    <div class="font-medium">张明</div>
                                    <div class="text-sm text-muted">发布于 2小时前</div>
                                </div>
                            </div>
                            
                            <h5 class="article-title mb-2">
                                <a href="#" class="text-dark text-decoration-none hover:text-primary">城市建筑的未来发展趋势与设计理念</a>
                            </h5>
                            
                            <p class="text-muted mb-3 line-clamp-2">随着城市化进程的加速，现代建筑不仅要满足功能需求，更要兼顾环保与美学。本文探讨了未来城市建筑的发展方向和创新设计理念...</p>
                            
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="stats d-flex gap-3">
                                    <span><i class="far fa-eye"></i> 1.2k</span>
                                    <span><i class="far fa-comment"></i> 48</span>
                                    <span><i class="far fa-bookmark"></i> 126</span>
                                </div>
                                
                                <div class="action-buttons d-flex gap-2">
                                    <button class="btn btn-sm btn-outline-primary rounded-pill">
                                        <i class="far fa-thumbs-up me-1"></i> 点赞
                                    </button>
                                    <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                        <i class="far fa-bookmark me-1"></i> 收藏
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 带多张图片的文章 -->
            <div class="article-card">
                <div class="row">
                    <div class="col-md-4">
                        <div class="article-image" style="display: flex; gap: 3px; height: 200px;">
                            <img src="https://picsum.photos/300/400?random=2" alt="旅行照片1" style="flex: 1;">
                            <div style="flex: 1; display: flex; flex-direction: column; gap: 3px;">
                                <img src="https://picsum.photos/300/200?random=3" alt="旅行照片2" style="flex: 1;">
                                <img src="https://picsum.photos/300/200?random=4" alt="旅行照片3" style="flex: 1;">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="article-content">
                            <div class="author-info d-flex align-items-center mb-2">
                                <img src="https://picsum.photos/100/100?random=102" alt="作者头像">
                                <div class="ms-2">
                                    <div class="font-medium">李华</div>
                                    <div class="text-sm text-muted">发布于 昨天</div>
                                </div>
                            </div>
                            
                            <h5 class="article-title mb-2">
                                <a href="#" class="text-dark text-decoration-none hover:text-primary">徒步喜马拉雅：一场心灵与自然的对话</a>
                            </h5>
                            
                            <p class="text-muted mb-3 line-clamp-2">历时15天的喜马拉雅徒步之旅，让我重新认识了自然的伟大与人类的渺小。沿途的风景从茂密森林到皑皑雪山，每一步都是新的体验...</p>
                            
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="stats d-flex gap-3">
                                    <span><i class="far fa-eye"></i> 3.5k</span>
                                    <span><i class="far fa-comment"></i> 156</span>
                                    <span><i class="far fa-bookmark"></i> 528</span>
                                </div>
                                
                                <div class="action-buttons d-flex gap-2">
                                    <button class="btn btn-sm btn-outline-primary rounded-pill">
                                        <i class="far fa-thumbs-up me-1"></i> 点赞
                                    </button>
                                    <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                        <i class="far fa-bookmark me-1"></i> 收藏
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 样式2：紧凑列表式 -->
        <div class="article-demo style-2 bg-white">
            <h3 class="demo-title">2. 紧凑列表式文章列表</h3>
            
            <!-- 带图片的文章 -->
            <div class="article-card">
                <div class="row">
                    <div class="col-md-2">
                        <div class="article-image">
                            <img src="https://picsum.photos/300/300?random=5" alt="美食照片">
                        </div>
                    </div>
                    <div class="col-md-10">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6 class="article-title mb-1">
                                    <a href="#" class="text-dark text-decoration-none hover:text-primary">家常红烧肉的完美做法，肉质鲜嫩不油腻</a>
                                </h6>
                                
                                <div class="d-flex flex-wrap gap-3 mt-1">
                                    <div class="author-info d-flex align-items-center">
                                        <img src="https://picsum.photos/100/100?random=103" alt="作者头像" style="width: 24px; height: 24px;">
                                        <span class="ms-1 text-sm text-muted">王厨师</span>
                                    </div>
                                    
                                    <div class="stats d-flex gap-3">
                                        <span><i class="far fa-eye"></i> 892</span>
                                        <span><i class="far fa-comment"></i> 32</span>
                                        <span class="text-muted">3天前</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="action-buttons d-flex gap-1">
                                <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                    <i class="far fa-thumbs-up"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                    <i class="far fa-bookmark"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 无图片的文章 -->
            <div class="article-card">
                <div class="row">
                    <div class="col-md-12">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6 class="article-title mb-1">
                                    <a href="#" class="text-dark text-decoration-none hover:text-primary">如何有效管理时间，提高工作效率</a>
                                </h6>
                                
                                <div class="d-flex flex-wrap gap-3 mt-1">
                                    <div class="author-info d-flex align-items-center">
                                        <img src="https://picsum.photos/100/100?random=104" alt="作者头像" style="width: 24px; height: 24px;">
                                        <span class="ms-1 text-sm text-muted">效率达人</span>
                                    </div>
                                    
                                    <div class="stats d-flex gap-3">
                                        <span><i class="far fa-eye"></i> 2.1k</span>
                                        <span><i class="far fa-comment"></i> 87</span>
                                        <span class="text-muted">1周前</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="action-buttons d-flex gap-1">
                                <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                    <i class="far fa-thumbs-up"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                    <i class="far fa-bookmark"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 带图片的文章 -->
            <div class="article-card">
                <div class="row">
                    <div class="col-md-2">
                        <div class="article-image">
                            <img src="https://picsum.photos/300/300?random=6" alt="科技产品照片">
                        </div>
                    </div>
                    <div class="col-md-10">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6 class="article-title mb-1">
                                    <a href="#" class="text-dark text-decoration-none hover:text-primary">2023年最值得购买的5款笔记本电脑推荐</a>
                                </h6>
                                
                                <div class="d-flex flex-wrap gap-3 mt-1">
                                    <div class="author-info d-flex align-items-center">
                                        <img src="https://picsum.photos/100/100?random=105" alt="作者头像" style="width: 24px; height: 24px;">
                                        <span class="ms-1 text-sm text-muted">科技测评师</span>
                                    </div>
                                    
                                    <div class="stats d-flex gap-3">
                                        <span><i class="far fa-eye"></i> 5.7k</span>
                                        <span><i class="far fa-comment"></i> 215</span>
                                        <span class="text-muted">2周前</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="action-buttons d-flex gap-1">
                                <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                    <i class="far fa-thumbs-up"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                    <i class="far fa-bookmark"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 样式3：杂志风格 -->
        <div class="article-demo style-3">
            <h3 class="demo-title">3. 杂志风格文章列表</h3>
            
            <!-- 带多张图片的文章 -->
            <div class="article-card">
                <div class="article-content">
                    <div class="author-info d-flex align-items-center mb-3">
                        <img src="https://picsum.photos/100/100?random=106" alt="作者头像">
                        <div class="ms-2">
                            <div class="font-medium">文艺青年</div>
                            <div class="text-sm text-muted">摄影专栏 · 3天前</div>
                        </div>
                    </div>
                    
                    <h5 class="article-title">
                        <a href="#" class="text-dark text-decoration-none hover:text-primary">光影之间：街头摄影的艺术与技巧</a>
                    </h5>
                    
                    <p class="text-muted mb-3">街头摄影捕捉的是城市生活中最真实、最生动的瞬间。本文分享了街头摄影的构图技巧、光线运用和时机把握，帮助你拍出更有故事感的作品...</p>
                    
                    <div class="multi-image">
                        <img src="https://picsum.photos/400/300?random=7" alt="街头摄影作品1">
                        <img src="https://picsum.photos/400/300?random=8" alt="街头摄影作品2">
                        <img src="https://picsum.photos/400/300?random=9" alt="街头摄影作品3">
                    </div>
                    
                    <div class="d-flex justify-content-between align-items-center mt-3">
                        <div class="stats d-flex gap-4">
                            <span><i class="far fa-eye"></i> 4.2k 浏览</span>
                            <span><i class="far fa-comment"></i> 93 评论</span>
                            <span><i class="far fa-bookmark"></i> 328 收藏</span>
                        </div>
                        
                        <div class="action-buttons d-flex gap-2">
                            <button class="btn btn-sm btn-primary rounded-pill">
                                <i class="far fa-thumbs-up me-1"></i> 喜欢 (542)
                            </button>
                            <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                <i class="far fa-share-alt me-1"></i> 分享
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 带单张图片的文章 -->
            <div class="article-card">
                <div class="article-content">
                    <div class="author-info d-flex align-items-center mb-3">
                        <img src="https://picsum.photos/100/100?random=107" alt="作者头像">
                        <div class="ms-2">
                            <div class="font-medium">音乐发烧友</div>
                            <div class="text-sm text-muted">音乐专栏 · 1周前</div>
                        </div>
                    </div>
                    
                    <h5 class="article-title">
                        <a href="#" class="text-dark text-decoration-none hover:text-primary">黑胶唱片的复兴：模拟音质的独特魅力</a>
                    </h5>
                    
                    <p class="text-muted mb-3">在数字音乐盛行的时代，黑胶唱片却迎来了复兴。本文探讨了黑胶唱片的独特音质特点、收藏价值以及如何开始你的黑胶唱片之旅...</p>
                    
                    <div class="article-image mb-3">
                        <img src="https://picsum.photos/1200/400?random=10" alt="黑胶唱片照片" class="w-100" style="border-radius: 6px;">
                    </div>
                    
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="stats d-flex gap-4">
                            <span><i class="far fa-eye"></i> 2.8k 浏览</span>
                            <span><i class="far fa-comment"></i> 67 评论</span>
                            <span><i class="far fa-bookmark"></i> 215 收藏</span>
                        </div>
                        
                        <div class="action-buttons d-flex gap-2">
                            <button class="btn btn-sm btn-primary rounded-pill">
                                <i class="far fa-thumbs-up me-1"></i> 喜欢 (326)
                            </button>
                            <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                <i class="far fa-share-alt me-1"></i> 分享
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 样式4：无图文章风格 -->
        <div class="article-demo style-4">
            <h3 class="demo-title">4. 无图文章列表（适合纯文字内容）</h3>
            
            <!-- 无图文章1 -->
            <div class="article-card">
                <div class="article-content">
                    <span class="badge bg-primary category-badge">读书笔记</span>
                    
                    <h5 class="article-title mb-2">
                        <a href="#" class="text-dark text-decoration-none hover:text-primary">《人类简史》带给我们的思考：人类文明的发展与未来</a>
                    </h5>
                    
                    <p class="text-muted mb-3 line-clamp-3">尤瓦尔·赫拉利的《人类简史》从认知革命、农业革命到科学革命，讲述了人类如何从一个普通的非洲灵长类动物成为地球的主宰。这本书不仅是一部人类历史，更是对人类未来的深刻思考...</p>
                    
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="d-flex align-items-center gap-4">
                            <div class="author-info d-flex align-items-center">
                                <img src="https://picsum.photos/100/100?random=108" alt="作者头像">
                                <span class="ms-2 text-sm">阅读者</span>
                            </div>
                            
                            <div class="stats d-flex gap-3">
                                <span><i class="far fa-eye"></i> 3.1k</span>
                                <span><i class="far fa-comment"></i> 124</span>
                                <span class="text-muted">2周前</span>
                            </div>
                        </div>
                        
                        <div class="action-buttons d-flex gap-2">
                            <button class="btn btn-sm btn-outline-primary rounded-pill">
                                <i class="far fa-thumbs-up me-1"></i> 428
                            </button>
                            <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                <i class="far fa-bookmark me-1"></i> 收藏
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 无图文章2 -->
            <div class="article-card">
                <div class="article-content">
                    <span class="badge bg-success category-badge">生活感悟</span>
                    
                    <h5 class="article-title mb-2">
                        <a href="#" class="text-dark text-decoration-none hover:text-primary">慢下来：在快节奏生活中寻找平衡的艺术</a>
                    </h5>
                    
                    <p class="text-muted mb-3 line-clamp-3">现代社会的快节奏让我们总是处于忙碌状态，却忽略了生活的本质。本文分享了如何在忙碌的生活中找到平衡点，学会放慢脚步，享受当下的每一刻...</p>
                    
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="d-flex align-items-center gap-4">
                            <div class="author-info d-flex align-items-center">
                                <img src="https://picsum.photos/100/100?random=109" alt="作者头像">
                                <span class="ms-2 text-sm">生活家</span>
                            </div>
                            
                            <div class="stats d-flex gap-3">
                                <span><i class="far fa-eye"></i> 6.7k</span>
                                <span><i class="far fa-comment"></i> 289</span>
                                <span class="text-muted">1个月前</span>
                            </div>
                        </div>
                        
                        <div class="action-buttons d-flex gap-2">
                            <button class="btn btn-sm btn-outline-primary rounded-pill">
                                <i class="far fa-thumbs-up me-1"></i> 1254
                            </button>
                            <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                <i class="far fa-bookmark me-1"></i> 收藏
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 无图文章3 -->
            <div class="article-card">
                <div class="article-content">
                    <span class="badge bg-info category-badge">职场经验</span>
                    
                    <h5 class="article-title mb-2">
                        <a href="#" class="text-dark text-decoration-none hover:text-primary">从职场新人到部门主管：我的5年成长之路</a>
                    </h5>
                    
                    <p class="text-muted mb-3 line-clamp-3">在职场打拼的5年里，我从一个懵懂的新人成长为能够独当一面的部门主管。这期间经历了无数挑战和挫折，也收获了宝贵的经验。本文将分享我的成长历程和职场感悟...</p>
                    
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="d-flex align-items-center gap-4">
                            <div class="author-info d-flex align-items-center">
                                <img src="https://picsum.photos/100/100?random=110" alt="作者头像">
                                <span class="ms-2 text-sm">职场导师</span>
                            </div>
                            
                            <div class="stats d-flex gap-3">
                                <span><i class="far fa-eye"></i> 8.9k</span>
                                <span><i class="far fa-comment"></i> 412</span>
                                <span class="text-muted">2个月前</span>
                            </div>
                        </div>
                        
                        <div class="action-buttons d-flex gap-2">
                            <button class="btn btn-sm btn-outline-primary rounded-pill">
                                <i class="far fa-thumbs-up me-1"></i> 2156
                            </button>
                            <button class="btn btn-sm btn-outline-secondary rounded-pill">
                                <i class="far fa-bookmark me-1"></i> 收藏
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 为交互按钮添加功能
        document.addEventListener('DOMContentLoaded', function() {
            // 点赞按钮交互
            const likeButtons = document.querySelectorAll('button:has(.far.fa-thumbs-up)');
            likeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const icon = this.querySelector('.far.fa-thumbs-up');
                    if (icon) {
                        // 切换图标
                        icon.classList.toggle('far');
                        icon.classList.toggle('fas');
                        
                        // 切换按钮样式
                        this.classList.toggle('btn-outline-primary');
                        this.classList.toggle('btn-primary');
                        
                        // 更新点赞数（如果有）
                        if (this.textContent.includes('(')) {
                            let countText = this.textContent.trim();
                            let count = parseInt(countText.match(/\d+/)[0]);
                            count = icon.classList.contains('fas') ? count + 1 : count - 1;
                            this.innerHTML = `${icon.outerHTML} 喜欢 (${count})`;
                        }
                    }
                });
            });
            
            // 收藏按钮交互
            const bookmarkButtons = document.querySelectorAll('button:has(.far.fa-bookmark)');
            bookmarkButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const icon = this.querySelector('.far.fa-bookmark');
                    if (icon) {
                        icon.classList.toggle('far');
                        icon.classList.toggle('fas');
                        
                        // 切换按钮样式
                        this.classList.toggle('btn-outline-secondary');
                        this.classList.toggle('btn-success');
                    }
                });
            });
        });
    </script>
</body>
</html>
    